{% extends 'base.html' %}
    {% block breadcrumb_current %}
        设备管理 > 设备调度调整
    {% endblock %}
{% block content %}

{% if messages %}
    {% for message in messages %}
        <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
            {{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    {% endfor %}
{% endif %}

    <div class="bg-light p-3 shadow-sm">
        <h5 style="color: #417690;">
            调整编号为{{ device.number }}的设备
            <a href="{% url 'device_list' %}" class="btn btn-secondary btn-sm float-end">返回设备列表</a>
        </h5>
    </div>


    <div class="container mt-4">
    <div class="card-body" style="margin-top: 50px; color: #417690;">

        <form method="post">
            {% csrf_token %}
            <div class="row g-3 mb-4" style="margin-top: 10px;">
                <div class="col-md-4">
                    <label class="form-label">原位置</label>
                    <input type="text" class="form-control" value="{{ device.place }}" readonly style="color: #417690;">
                </div>
                <div class="col-md-4" style="margin-bottom: 30px;">
                    <label class="form-label">原状态</label>
                    <input type="text" class="form-control" value="{{ device.get_state_display }}" readonly style="color: #417690;">
                </div>
            </div>
            <h5 class="card-title mb-0" >调整到</h5>
            <div class="row g-3 mb-4" style="margin-top: 10px;">
                <div class="col-md-4">
                    <label for="{{ form.placenow.id_for_label }}" class="form-label">{{ form.placenow.label }}</label>
                    <select name="{{ form.placenow.name }}" id="{{ form.placenow.id_for_label }}" class="form-select" required style="color: #417690;">
                        <option value="">-- 请选择新位置 --</option>
                        {% for choice in form.placenow.field.choices %}
                            <option value="{{ choice.0 }}">{{ choice.1 }}</option>
                        {% endfor %}
                    </select>
                    <div class="invalid-feedback">请选择新位置</div>
                </div>
                <div class="col-md-4">
                    <label for="{{ form.statenow.id_for_label }}" class="form-label">{{ form.statenow.label }}</label>
                    <select name="{{ form.statenow.name }}" id="{{ form.statenow.id_for_label }}" class="form-select" required style="color: #417690;">
                        <option value="">-- 请选择新状态 --</option>
                        {% for choice in form.statenow.field.choices %}
                            <option value="{{ choice.0 }}">{{ choice.1 }}</option>
                        {% endfor %}
                    </select>
                    <div class="invalid-feedback">请选择新状态</div>
                </div>
                <div class="col-md-4">
                    <label for="{{ form.reason.id_for_label }}" class="form-label">{{ form.reason.label }}</label>
                    <input type="text" name="{{ form.reason.name }}" id="{{ form.reason.id_for_label }}" 
                        value="{{ form.reason.value|default:'' }}" class="form-control {% if form.reason.errors %}is-invalid{% endif %}" 
                        placeholder="请输入调整原因" required>
                    {% if form.reason.errors %}
                    <div class="invalid-feedback">
                        {% for error in form.reason.errors %}
                            {{ error }}
                        {% endfor %}
                    </div>
                    {% else %}
                    <div class="invalid-feedback">
                        调整原因不能为空
                    </div>
                    {% endif %}
                </div>
            </div>
            <div class="text-center"  style="margin-top: 60px; margin-bottom: 60px;">
                <button type="submit" class="btn ms-2" style="background-color: #417690; color: white;">保 存</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}
